<template>
  <div id="detailConsult">
    <ChatRecord ref="chatRecordRef" />
    <div class="card">
      <div>
        <div clas="label">
          <span>会诊状态：</span>
          <span>{{ applyForm.statusName }}</span>
        </div>
        <div>
          <span>申请时间：</span>
          <span>{{ applyForm.createTime }}</span>
        </div>
      </div>
      <el-button size="mini" type="primary" @click="viewChatRecord">查看聊天记录</el-button>
    </div>
    <el-form label-position="left" label-width="120px" ref="formRef">
      <div style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 20px">
        <span>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>我的会诊</el-breadcrumb-item>
            <el-breadcrumb-item>会诊详情</el-breadcrumb-item>
          </el-breadcrumb>
        </span>
        <el-button icon="arrow-left" size="mini" type="primary" @click="backTo">返回</el-button>
      </div>
      <div>
        <el-divider content-position="left">会诊信息</el-divider>
        <el-descriptions :column="2">
          <el-descriptions-item label="会诊医生">
            {{ applyForm.expertDoctorName }}
          </el-descriptions-item>
          <el-descriptions-item label="备注">
            {{ applyForm.remarks }}
          </el-descriptions-item>
          <el-descriptions-item label="申请医生">
            {{ applyForm.createBy }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div>
        <el-divider content-position="left">患者信息</el-divider>
        <el-descriptions :column="2">
          <el-descriptions-item label="姓名">
            {{ applyForm.inquiryPatientName }}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="2">
          <el-descriptions-item label="年龄">
            {{ applyForm.inquiryPatientAge }}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="2">
          <el-descriptions-item label="性别">
            {{ applyForm.inquiryPatientSex ? applyForm.inquiryPatientSex == 1 ? '男' : '女' : '未知' }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div>
        <el-divider content-position="left">疾病信息</el-divider>
        <el-descriptions :column="2">
          <el-descriptions-item label="目前诊断">
            {{ applyForm.diagnosis }}
          </el-descriptions-item>
          <el-descriptions-item label="主诉">
            {{ applyForm.mainSuit }}
          </el-descriptions-item>
          <el-descriptions-item label="现病史">
            {{ applyForm.presentIllness }}
          </el-descriptions-item>
          <el-descriptions-item label="既往史">
            {{ applyForm.historyPresentIllness }}
          </el-descriptions-item>

          <el-descriptions-item label="会诊目的">
            {{ applyForm.rcsPurpose }}
          </el-descriptions-item>
        </el-descriptions>
        <div>
          <el-divider content-position="left">            </el-divider>
          <el-descriptions :column="2">
            <el-descriptions-item label="会诊诊断">
              {{ applyForm.diagnosis }}
            </el-descriptions-item>
            <el-descriptions-item label="会诊意见">
              {{ applyForm.proposal }}
            </el-descriptions-item>
            <el-descriptions-item label="图片资料">
              <div style="display: flex;flex-wrap: wrap" v-if="applyForm.files">
                <el-image :key="image" :preview-src-list="applyForm.files.split(',')" v-for="image in applyForm.files.split(',')" :src="image" style="margin: 12px;width: 120px;height: 120px; border: 1px dashed #d9d9d9;"></el-image>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import ChatRecord from './chatRecord';

export default {
  components: {
    ChatRecord,
  },
  data() {
    return {
      applyForm: {
        patientIdcard: '',
        patientHeight: '',
        patientWeight: '',
        mmol: '',
        patientName: '',
        patientSex: '',
        patientAge: '',
        temp: '',
        bpm: '',
        SpO2: '',
        checklist_sbp: '',
        diagnosis: '',
        mainSuit: '',
        presentIllness: '',
        rcsPurpose: '',
        remarks: '',
        consultationTime: '',
        departmentId: '',
        doctors: [],
      },
      fileList: [],
      dialogVisible: false,
    };
  },
  created() {
    this.$ajax.getMyConsultationList({
    }).then((res) => {
      // 0已取消 1待审核 2审核通过 3会诊中 4已结束
      // map
      const statusMap = {
        0: '已取消',
        1: '待审核',
        2: '审核通过',
        3: '会诊中',
        4: '已结束',
      };
      const data = res.data.find(item => item.id == this.$route.query.id) || {};
      if (data.expertDoctorList) {
        const expertDoctorName = data.expertDoctorList.map(item => item.expertDoctorName).join(',');
        data.expertDoctorName = expertDoctorName;
      }
      this.applyForm = {
        ...data,
        statusName: statusMap[data.status],
      };
    });
  },
  methods: {
    backTo() {
      this.$emit('back');
      this.$router.push({
        path: '/remoteConsult',
      });
    },
    viewChatRecord() {
      this.$refs.chatRecordRef.open(this.patientMsg);
    },
  },
};
</script>

<style lang="scss">
#detailConsult {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 16px;
  #status {
    background-color: azure;
    padding: 4px 8px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .card {
    display: flex;align-items: center;justify-content: space-between;
    margin-bottom: 20px;
    background-color: #f2f2f2;
    padding: 20px;
    border-radius: 4px;
  }
  .label span{
    font-size: 12px;
  }

}
</style>
